import AbstractField from '@/components/hhd/design/FormDesigner/field/comps/AbstractField';
import {createDefaultFieldElement} from '@/utils/FormDesignUtils';
import {createField} from '@/components/hhd/design/FormDesigner/types';
import {guid, isEmpty} from '@/utils';
import $ from 'jquery';
import {message} from "ant-design-vue";

export default class SelectS extends AbstractField {
  getFieldComponentTitle() {
    return '下拉';
  }

  getFieldComponentName() {
    return 'selectS';
  }

  getDefaultConfig() {
    return new Promise((resolve) => {
      let field = createField();
      field.id = guid();
      field.component = 'selectS';
      field.fieldName = '下拉';
      field.label = '下拉';
      field.placeholder = '请选择下拉';
      resolve(field);
    });
  }

  checkField(field) {
    if (super.checkField(field)) {
      if (isEmpty(field.dict)) {
        message.error(field.label + ' 枚举值不能为空');
        return false;
      } else
        return true;
    } else {
      return false;
    }
  }

  createFieldElement() {
    return new Promise((resolve) => {
      resolve(this.createDefaultFieldElement());
    });
  }

  setFieldTitle(el, fieldConfig) {
    $(el).find('span[data-role=field-title]').html(fieldConfig.label);
  }

  createDefaultFieldElement() {
    let res = createDefaultFieldElement();
    res.innerHTML = '<div><span style="position: relative" data-role="field-title">下拉</span><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="图标: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>';
    return res;
  }
};
